<template>
  <div v-if="visible">
    <a-drawer :title="title" :visible="visible" width="90%" @close="() => { this.visible = false }">
      <div id="print">
        <a-form-model :model="entity" layout="inline">
          <table class="mainTable">
            <thead>
              <tr>
                <td class="theTopTitle" colspan="4">天罡助剂报价单</td>
              </tr>
              <tr>
                <td class="theDocumentNo" colspan="4">报价单编号：{{ entity.DocumentNo }}</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <p>客户名称：{{ entity.CustomerName }}</p>
                </td>
                <td>
                  <p>联系人：{{ entity.LinkMan }}</p>
                </td>
                <td>
                  <p>付款方式：{{ entity.TransactionType }}</p>
                </td>
                <td></td>
              </tr>
              <tr>
                <td>
                  <p>开票类型：{{ entity.BillingType }}</p>
                </td>
                <td>
                  <p>折扣：{{ entity.Discount }}%</p>
                </td>
                <td>
                  <p>金额合计(元)：<span v-format="'￥#,##0.00'">{{ entity.TotalAmount }}</span></p>
                </td>
                <td></td>
              </tr>
              <tr>
                <td>
                  <p class="ppform">税金(元)：<span v-format="'￥#,##0.00'">{{ entity.Taxes }}</span></p>
                </td>
                <td>
                  <p>运输方式：{{ entity.TransportType }}</p>
                </td>
                <td>
                  <p>送货地址：{{ entity.DeliveryAddress }}</p>
                </td>
                <td></td>
              </tr>
              <tr>
                <td>
                  <p class="ppform">运费(元)：<span v-format="'￥#,##0.00'">{{ entity.Freight }}</span></p>
                </td>
                <td>
                  <p>备注：{{ entity.Remark }}</p>
                </td>
                <td></td>
                <td></td>
              </tr>
            </tbody>
          </table>
        </a-form-model>
        <table class="DetailTable" border="1">
          <thead>
            <tr>
              <td style="width: 100px;text-align: center">序号</td>
              <td style="width: 250px;text-align: center">产品名称</td>
              <td style="width: 250px;text-align: center">产品数量</td>
              <td style="width: 250px;text-align: center">税率</td>
              <td style="width: 250px;text-align: center">含税价格(元)</td>
              <td style="width: 250px;text-align: center">不含税价格(元)</td>
              <td style="width: 250px;text-align: center">税金(元)</td>
              <td style="width: 250px;text-align: center">金额(元)</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(Subitem, index) in data" :key="index + Subitem.Id">
              <td style="text-align: center">{{ index + 1 }}</td>
              <td style="text-align: center">{{ Subitem.cInvName }}</td>
              <td style="text-align: right" v-format="'#,##0'">{{ Subitem.ProductIdNum }}</td>
              <td style="text-align: right" v-format="'0%'">{{ Subitem.TaxRate / 100 }}</td>
              <td style="text-align: right" v-format="'￥#,##0.00'">{{ Subitem.Tax_Included_Price }}</td>
              <td style="text-align: right" v-format="'￥#,##0.00'">{{ Subitem.Tax_Excluded_Price }}</td>
              <td style="text-align: right" v-format="'￥#,##0.00'">{{ Subitem.Tax }}</td>
              <td style="text-align: right" v-format="'￥#,##0.00'">{{ Subitem.Amounts }}</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td class="generalPrice" colspan="7">金额合计(元)：</td>
              <td v-format="'￥#,##0.00'" class="generalPrice">{{ a }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }">
        <a-button @click="close">取消</a-button>&nbsp;
        <a-button type="primary" v-print="'print'">打印</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>

const columns = [
  // { title: '产品ID;产品编号', dataIndex: 'ProductId', width: '10%' },
  { title: '产品名称', dataIndex: 'cInvName' },
  { title: '产品数量', dataIndex: 'ProductIdNum', scopedSlots: { customRender: 'ProductIdNum' } },
  { title: '税率', dataIndex: 'TaxRate', scopedSlots: { customRender: 'TaxRate' } },
  {
    title: '含税价格',
    dataIndex: 'Tax_Included_Price',
    align: 'center',
    scopedSlots: { customRender: 'Tax_Included_Price' }
  },
  {
    title: '不含税价格',
    dataIndex: 'Tax_Excluded_Price',
    align: 'center',
    scopedSlots: { customRender: 'Tax_Excluded_Price' }
  },
  { title: '金额', dataIndex: 'Amounts', scopedSlots: { customRender: 'Amounts' } },
  // { title: '报价单主表ID;报价单主表编号', dataIndex: 'MIdOfferSheet' },
  // { title: '更新时间', dataIndex: 'UpdateTime' },
  // { title: '创建时间', dataIndex: 'CreateTime', scopedSlots: { customRender: 'CreateTime' } },
  { title: '备注', dataIndex: 'Remark', scopedSlots: { customRender: 'Remark' } }
  //   { title: '操作', dataIndex: 'action', align: 'left', scopedSlots: { customRender: 'action' } }
]

export default {
  props: {
    parentObj: Object
  },
  watch: {
    data: {
      handler(n, o) {
        this.$nextTick(() => {
          // 金额
          this.a = 0
          // 含税价
          this.j = 0
          // 不含税价
          this.n = 0
          this.TaxAll = 0
          n.length > 0 &&
            n.forEach(item => {
              if (Number(item.ProductIdNum) < 0) {
                this.$message.warning('数量不能小于0')
                this.$set(item, 'ProductIdNum', 1)
              }
              if (Number(item.TaxRate) < 0) {
                this.$message.warning('税率不能小于0')
                this.$set(item, 'TaxRate', 1)
              }
              if (Number(item.Tax_Included_Price) < 0) {
                this.$message.warning('价格不能小于0')
                this.$set(item, 'Tax_Included_Price', 1)
              }
              this.j += Number(item.Tax_Included_Price)
              this.n += Number(item.Tax_Excluded_Price)
              // 金额
              item.Amounts = item.ProductIdNum * item.Tax_Included_Price
              // 不含税价格
              item.Tax_Excluded_Price = item.Tax_Included_Price - item.Tax_Included_Price * (item.TaxRate / 100)
              // 税金
              item.Tax =
                (item.Tax_Included_Price - item.Tax_Included_Price / (item.TaxRate / 100 + 1)) * item.ProductIdNum

              this.TaxAll += Number(item.Tax)
              this.a += Number(item.Amounts)
            })
          if (this.a) {
            this.entity.TotalAmount = this.a * (this.entity.Discount / 100)
            this.entity.Taxes = this.TaxAll * (this.entity.Discount / 100)
          } else {
            this.a = 0
          }
        })
      },
      deep: true,
      immediate: true
    },
    'entity.Freight': {
      handler(newVal, oldVal) {
        if (newVal < 0) {
          this.$set(this.entity, 'Freight', 1)
          return this.$message.error('运费不可以小于0')
        }
      },
      deep: true,
      immediate: true
    },
    'entity.Discount': {
      handler(newVal, oldVal) {
        if (newVal > 100) {
          this.$set(this.entity, 'Discount', 100)
          return this.$message.error('折扣不可以大于100')
        }
        if (newVal < 0) {
          this.$set(this.entity, 'Discount', 1)
          return this.$message.error('折扣不可以小于0')
        }
        if (newVal) {
          this.entity.TotalAmount = this.a * (this.entity.Discount / 100)
          this.entity.Taxes = this.TaxAll * (this.entity.Discount / 100)
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      a: 0,
      n: 0,
      j: 0,
      TaxAll: 0,
      selectedRowKeys: [],
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => {
          this.pageSize = pageSize
        }
      },
      filters: {},
      sorter: { field: 'Id', order: 'desc' },
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      id: '',
      columns,
      data: [],
      QOSD_List: [],
      visible: false,
      loading: false,
      entity: {},
      rules: {},
      title: ''
    }
  },
  components: {
    // PriceChoose
  },
  methods: {
    // 子表删除
    handleDelete(ids) {
      var thisObj = this
      // this.$confirm({
      //   title: '确认删除吗?',
      //   onOk () {
      //     return new Promise((resolve, reject) => {
      //       thisObj.$http.post('/QuotationManagement/Quot_PriceListDetails/DeleteData', ids).then(resJson => {
      //         resolve()
      //         if (resJson.Success) {
      //           thisObj.$message.success('操作成功!')
      //           thisObj.getDataList()
      //         } else {
      //           thisObj.$message.error(resJson.Msg)
      //         }
      //       })
      //     })
      //   }
      // })

      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        thisObj.$http
          .post('/QuotationManagement/Quot_PriceListDetails/DeleteData', ids)
          .then(resJson => {
            // resolve()

            if (resJson.Success) {
              thisObj.$message.success('操作成功!')

              thisObj.getDataList()
            } else {
              thisObj.$message.error(resJson.Msg)
            }
          })
      })
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.getDataList()
    },
    close() {
      this.visible = false
      this.entity = {}
    },
    init() {
      this.visible = true
      this.entity = {}
      this.data = []
    },
    addTable() {
      this.$refs.materialChoose.openChoose()
    },

    openForm(id, title) {
      this.init()
      this.title = title
      if (id) {
        // console.log(123)
        this.loading = true
        this.id = id
        this.getDataList()
      }
    },
    getDataList() {
      this.$http
        .post('/QuotationManagement/Quot_OfferSheetMain/GetTheDataOfAllPrint', {
          PageIndex: this.pagination.current,
          PageRows: 999,
          SortField: 'Id',
          SortType: 'desc',
          Search: {
            Condition: 'Id',
            Keyword: this.id
          }
        })
        .then(res => {
          if (res.Success) {
            this.entity = res.Data
            this.data = res.Data.QOSD_List
            if (res.Total) {
              const pagination = { ...this.pagination }
              pagination.total = res.Total
              this.pagination = pagination
            }
          } else {
            this.$message.error(res.Msg)
          }
        })
    },
    handleChoose(a) {
      a.forEach(item => {
        this.data.push({
          ProductId: item.Id,
          cInvName: item.cInvName
        })
      })
    },
    creatQrCode(qText, div) {
      const ar = new QRCode(div, {
        text: qText, // 需要转换为二维码的内容
        width: 80,
        height: 80,
        colorDark: '#000000',
        colorLight: '#ffffff'
      })
    },
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.loading = true
        const entityData = { ...this.entity }
        this.QOSD_List = [...this.data]
        entityData.QOSD_List = this.QOSD_List
        this.$http.post('/QuotationManagement/Quot_OfferSheetMain/SaveData', entityData).then(resJson => {
          this.loading = false
          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false
            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.mainTable {
  width: 100%;
  margin: 0 auto;
}

.theTopTitle {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 10px;
}

.theDocumentNo {
  text-align: right;
  font-size: 16px;
  font-weight: bold;
}

.DetailTable {
  width: 100%;
  margin: 0 auto;
}

.theContentTitle {
  text-align: center;
}

.theContent {
  text-align: right;
}

.generalPrice {
  font-weight: bold;
  font-size: 16px;
  text-align: right;
}</style>
